<!--
*Author：富行天下团队
 *
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/mall/Mall_small_user_contact.js此处编写
 -->



<template>
  <div style="background: white; margin-top: 15px">
    <el-tabs type="border-card" style="height: 400px">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date"></i> 订单项目</span>
        <vol-table ref="tableList"
                   :loadKey="true"
                   :columns="columns"
                   :pagination-hide="false"
                   :height="300"
                   :defaultLoadPage="false"
                   url="/api/Cabinet/getDetailPage"
                   :columnIndex="false"
                   :index="true"
                   :click-edit="false"></vol-table>

      </el-tab-pane>
      <!-- <el-tab-pane :lazy="true" label="套票明细"></el-tab-pane> -->
    </el-tabs>





  </div>

</template>

<script>
  import VolTable from "@/components/basic/VolTable.vue";
  import VolForm from "@/components/basic/VolForm.vue";
  var vueParam = {
    components: {
      VolForm: VolForm,
      VolTable,
      VolBox: () => import("@/components/basic/VolBox.vue"),
    },
    methods: {

      getRender() {
        return (h, { row, column, index }) => {
          return h("div", { style: {} }, [
            h(
              "a",
              {
                props: {},
                style: { "border-bottom": "1px solid" ,"margin-rigth": "10px"},
                on: {
                  click: (e) => {
                    this.http.get(`api/Cabinet/GetCabinetOpen?id=${row.boxID}`)
                    .then(result => {
                        //this.$refs.detail.$refs.table.tableData.push(...result.data)
                    })
                  },
                },
              },
              "开锁 \r\r           "
            ),
            h(
              "a",
              {
                props: {},
                style: { "border-bottom": "1px solid","margin-left": "20px" },
                on: {
                  click: (e) => {
                    this.http.get(`api/Cabinet/GetCabinetLight?id=${row.boxID}&type=1`)
                    .then(result => {
                        //this.$refs.detail.$refs.table.tableData.push(...result.data)
                    })
                  },
                },
              },
              "红灯亮"
            ),
            h(
              "a",
              {
                props: {},
                style: { "border-bottom": "1px solid","margin-left": "20px" },
                on: {
                  click: (e) => {
                    this.http.get(`api/Cabinet/GetCabinetLight?id=${row.boxID}&type=0`)
                    .then(result => {
                        //this.$refs.detail.$refs.table.tableData.push(...result.data)
                    })
                  },
                },
              },
              "绿灯亮"
            ),
          ])
        };
      },
    },
    data() {
      return {
        tableData: [],
        columns: [
          { field: 'boxName', title: '柜门名称', type: 'string', width: 120, align: 'left',  },
          { field: 'boxCode', title: '柜门编码', type: 'string', width: 120, align: 'left',  },
          { field: 'boxLight', title: '柜门灯组', type: 'string', width: 120, align: 'left', },
          {field:'Render',title: "操作",fixed: "right",width:  160,render: this.getRender(),},
             {field:'boxID',title:'柜子id',type:'int',width:120,align:'left',hidden: true,},
          //    {field:'greenLightStatus',title:'绿灯状态',type:'string',width:120,align:'left',edit: { type: "text", required: true }},
          { field: 'id', title: 'id', type: 'int', width: 120, hidden: true, readonly: true, require: true, align: 'left' },
          //    {field:'redLightStatus',title:'红灯状态',type:'string',width:120,align:'left',edit: { type: "text", required: true }}
        ],
      };
    }
  };
  export default vueParam;
</script>
